<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<style>
</style>

<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'center',border:false">
        <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'fi-check icon-blue'" onclick="saveElementDefData()">提交</a>
        <a href="${ctxPath}/process/process-definition?processDefinitionId=${proceDefId}&resourceType=image" target="_blank" class="easyui-linkbutton" data-options="iconCls:'fi-photo icon-blue'">查看流程图片</a>
        <table id="dg" class="easyui-datagrid"
               data-options="
				singleSelect: true,
				url: '${ctxPath}/element/getElementDefsByProceDefId/${proceDefId}',
				method:'get',
				onClickCell: onClickCell,
				border:true,
				fit:true
			">
            <thead>
            <tr>
                <%--<th data-options="field:'id',width:80">ID</th>--%>
                <th data-options="field:'name',width:100">名称</th>
                <th data-options="field:'key',width:100">KEY值</th>
                <th data-options="field:'elementType',width:100">类型</th>
                <th data-options="field:'procdefId',width:120">流程定义ID</th>
                <th data-options="field:'isPrint',width:120,formatter:function(value,row,index){ console.log(row.isPrint);if(value){return '是'}return '否'}">是否打印</th>
                <th data-options="field:'seq',width:80,align:'right',editor:'numberbox'">顺序</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/javascript">
        $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            }
        });

    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            $('#dg').datagrid('endEdit', editIndex);
            return true;
        } else {
            return false;
        }
    }

    function saveElementDefData(){
        var rows = $('#dg').datagrid('getSelections');
        if(rows.length<=0){
            $.messager.alert("提示","请选择记录","info");
            return;
        }
        var row = $("#dg").datagrid("getSelected");
        console.log(row)
        var index = $('#dg').datagrid('getRowIndex', row);
            $('#dg').datagrid('endEdit', index);    //结束编辑行。
            $.ajax({
                type:"post",dataType:"json",
                url:"${ctxPath}/element/UpdateElementDef",
                data:{id:row.id,name:row.name,key:row.key,seq:row.seq,procdefId:row.procdefId,elementType:row.elementType,isPrint:row.isPrint},
                success:function(data){
                    if(data.success) {
                        showMsg(data.msg);
                        $('#dg').datagrid('reload');
                        $('#dg').datagrid('selectRow', index);
                    }else{
                        $.messager.alert("错误",data.msg,"error");
                    }
                }
            });
    }



    function onClickCell(index, field){
        if (endEditing()){
            var row=$('#dg').datagrid('selectRow', index)
                .datagrid('editCell', {index:index,field:field});
            console.log(row)
            editIndex = index;
        }
    }
</script>